<template>
    <div>
        <el-card style="margin-bottom: 10px" >
            <CategorySelector :isdisabled="!isShowAttrList"/>
        </el-card>

        <el-card v-if="isShowAttrList">
            <el-button type="primary" :icon="Plus" :disabled="!categoryliststore.categorySelectorid3 " @click="showaddbox">添加</el-button>
            <el-table :data="attrListdata" border style="width: 100% ; margin-top: 10px;">
                <el-table-column type="index" label="序号" width="180" />
                <el-table-column prop="attrName" label="属性名称" width="180" />
                <el-table-column label="属性值列表">
                    <template v-slot="{row}">
                        <el-tag v-for="attrValue in row.attrValueList" :key="attrValue.id"
                            style="margin-right:6px;">{{attrValue.valueName}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200" >
                    <template v-slot="{row}">
                        <el-button title="编辑属性" type="primary" :icon="Edit" size="small" @click="postattrlist(row)"></el-button>
                        <el-popconfirm :title="`您真的要删除${row.attrName}属性吗?`" @confirm="confirmEvent(row)" @cancel="cancelEvent">
                          <template #reference>
                            <el-button title="删除属性" type="danger" :icon="Delete" size="small"></el-button>
                          </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                </el-table>
        </el-card>

        <div v-else>
        <el-card>
          <el-form >
            <el-form-item label="属性名">
              <el-input placeholder="请输入属性名" v-model="attrInfo.attrName" @blur="blurattrName" style="width:30%"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button :icon="Plus" type="primary" @click="addattrInfovalue" :disabled="!attrInfo.attrName">添加属性值</el-button>
              <el-button  @click="isShowAttrList=true">取消</el-button>
            </el-form-item>
          </el-form>
          <el-table style="margin-bottom:10px;" :data="attrInfo.attrValueList">
            <el-table-column label="序号" type="index" align="center" width="80"/>
            <el-table-column label="属性值名称">
              <template v-slot="{row,$index}" >
                <el-input size="small" ref="addinput" v-if="row.isshowinput" v-model="row.valueName" @blur="bluraddinput(row,$index)"></el-input>
                <span v-else @dblclick="changinput(row)">{{ row.valueName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="{row,$index}"  >
              <el-popconfirm :title="`您真的要删除${row.valueName}属性值吗?`" @confirm="delinfovalue(row,$index)" @cancel="cancelEvent">
                <template #reference>
                  <el-button title="删除属性" type="danger" :icon="Delete" size="small"></el-button>
                </template>
              </el-popconfirm>
            </template>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="conservedata" :disabled="!attrInfo.attrName">保存</el-button>
          <el-button @click="isShowAttrList=true">取消</el-button>
        </el-card>
      </div>
    </div>
</template>

<script lang="ts">

export default {
        name:'Attr',

    }
</script>

<script setup lang="ts">
   import { Plus ,Edit,Delete} from '@element-plus/icons-vue';
   import { ElMessage, ElMessageBox } from 'element-plus';
   import { watch ,ref , reactive ,nextTick} from 'vue';
   import { reqgetattrListdata ,reqgetdelattrListdata,reqgetpostattrListdata} from '@/api/Product/Attr'
   import type {attrInfomodul,attrvaluelistmodul,attrvaluemodul,attrlistdatamodul} from '@/api/Product/model/Attr'
   import usercategorylist from '@/stores/category'
  //  定义pinia里的数据
   let categoryliststore = usercategorylist()
  //  列表数据
   let attrListdata = ref<attrlistdatamodul>([])
  //  列表和增加盒子切换状态包括三级导航
   let isShowAttrList = ref(true)
// 请求列表数据
   let getattrlistdata = async ()=>{
    const newdata = await reqgetattrListdata({
        category1Id: categoryliststore.categorySelectorid1 as number,
        category2Id: categoryliststore.categorySelectorid2 as number,
        category3Id: categoryliststore.categorySelectorid3 as number
    })
    console.log(newdata);
    ElMessage.success('数据请求成功')
    attrListdata.value = newdata as any
   }
// 进入页面立即监听第三个id 有值或者有变化执行请求数据
   watch(() => categoryliststore.categorySelectorid3 , ()=> {
    if(!categoryliststore.categorySelectorid3){
        attrListdata.value = []
        return
    }
    console.log(categoryliststore.categorySelectorid3);
    attrInfo.categoryId = categoryliststore.categorySelectorid3 
    getattrlistdata()
   },{immediate:true})
// 点击删除属性  确定
  const confirmEvent = async (row:any) => {
    console.log(row);
    
   await reqgetdelattrListdata(row.id)
  ElMessage.success("删除属性成功了")
  getattrlistdata()
  }
// 点击删除属性  取消
  const cancelEvent = () => {
    ElMessage.info('取消删除数据')
  }

  // 添加属性
  // 定义一个添加属性
  const attrInfo = reactive<attrInfomodul>({
  attrName: '', // 属性名
  attrValueList:<attrvaluelistmodul> [], // 属性值列表
  categoryId: 0 ,// 三级分类id
  categoryLevel:3
  })
  console.log(categoryliststore.categorySelectorid3);
  
  // 定义一个ref属性用于控制输入框的焦点
  let addinput = ref()
  // 弹出增加或者修改的盒子
  let showaddbox = ()=>{
    // 初始化弹框数据
    attrInfo.attrValueList = []
    attrInfo.attrName = ''
    delete attrInfo.id
    isShowAttrList.value = false
  }
  
  // 当增加属性名失去光标判段
  let blurattrName = () => {
    let bol = attrListdata.value.every(item =>{
         return item.attrName != attrInfo.attrName
    })
    
    if(!bol){
      ElMessage.info(`已有属性名${attrInfo.attrName}，如要修改请点击编辑`)
      attrInfo.attrName = ''
    }
  }
  // 点击添加属性和值
  let addattrInfovalue = ()=>{
    
    attrInfo.attrValueList.push({
      isshowinput:true,
      valueName:''
    })
    // 自动获取焦点
    nextTick(()=>{
      addinput.value?.focus()
    })
  }

  // 增加时失去焦点事件
  let newdata1 = ref<attrvaluelistmodul>([])
  let newdata2 = ref<attrvaluelistmodul>([])
  let bluraddinput = (row:attrvaluemodul,index:number)=>{
    Object.assign(newdata1.value,attrInfo.attrValueList.slice(index,index+1))

    newdata2.value = attrInfo.attrValueList.filter(item => {
      return item.valueName === newdata1.value[0].valueName
    })
  
    
    if(newdata2.value.length != 1 && attrInfo.attrValueList.length>1){
      ElMessage.info(`已有属性值${row.valueName}`)
      row.valueName = ''
    }

    if(!row.valueName.trim()){
      attrInfo.attrValueList.splice(index,1)
      return
    }

    attrInfo.attrValueList[index].isshowinput = false
  }

  // 双击标签变为输出框
  let changinput = (row:attrvaluemodul)=>{
    row.isshowinput=true
    nextTick(()=>{
      addinput.value?.focus()
    })
  }
  // 点击删除属性值
  let delinfovalue = (row:attrvaluemodul,index:number)=>{
    attrInfo.attrValueList.splice(index,1)
    ElMessage.success(`删除${row.valueName}属性值成功`)
  }

  // 点击保存
  let conservedata =async ()=>{
    await reqgetpostattrListdata(attrInfo)
    isShowAttrList.value = true
    getattrlistdata()
  }

  // 点击编辑
  let postattrlist =(row:attrvaluemodul)=>{
    isShowAttrList.value=false
    Object.assign(attrInfo,row)
  }
 
  


</script>

<style lang="scss" scoped>
</style>